<template>
  <view class="evaluate-button-component">
    <view class="evaluate-button-body">
    	<view class="evaluate-button-content">
    	  <view
    	    v-if="showReset"
    	    class="reset-button"
    	    @click="resetOptions"
    	  >
    	    <image class="icon-reset" src="https://s1.huishoubao.com/static/business-component/icon_reset.png"></image>
    	    <view class="reset-text">重新选择</view>
    	  </view>
    	  <view class="evaluate-button">
    			<!-- <uv-button
    				type="primary"
    				:color="background"
						openType="getPhoneNumber"
    				:loading="loading"
    				:disabled="disabled || loading"
    				loadingText="正在获取预估价格"
    				loadingSize="18"
    				className="custom-evaluate-button"
						:customTextStyle="{
							fontSize: '32rpx',
						}"
    				:customStyle="{
    					height: '88rpx',
    					fontWeight: 650,
							fontSize: '32rpx',
    					color,
    					borderRadius: '4rpx'
    				}"
    				@click="$emit('evaluate', $event)"
    				@getphonenumber="$emit('getphonenumber', $event)"
    			>
    				查看预估价格
    			</uv-button> -->
					<!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
					<button
						v-if="needAuthPhone"
						open-type="getPhoneNumber"
						:disabled="loadingPhone || disabled || loading"
						:style="{
							color,
							background
						}"
						class="evaluate-btn"
						:class="{
							disabled: loadingPhone || disabled || loading
						}"
						@click="launchPhoneNumber"
						@getphonenumber="getPhoneNumber"
					>
						<text>{{ loading ? '正在获取预估价格' : '查看预估价格' }}</text>
					</button>
					<button
						v-else
						:disabled="disabled || loading"
						:style="{
							color,
							background
						}"
						class="evaluate-btn"
						:class="{
							disabled: disabled || loading
						}"
						@click="evaluate"
					>
						<text>{{ loading ? '正在获取预估价格' : '查看预估价格' }}</text>
					</button>
					<!-- #endif -->
					<!-- #ifndef MP-WEIXIN || MP-ALIPAY -->
					<button
						:disabled="disabled || loading"
						:style="{
							color,
							background
						}"
						class="evaluate-btn"
						:class="{
							disabled: disabled || loading
						}"
						@click="evaluate"
					>
						<text>{{ loading ? '正在获取预估价格' : '查看预估价格' }}</text>
					</button>
					<!-- #endif -->
    	  </view>
    	</view>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex'

export default {
	name: 'EvaluateButton',
	props: {
		showReset: {
		  type: Boolean,
		  default: true
		},
		color: {
		  type: String,
		  default: '#2C2C2C'
		},
		background: {
		  type: String,
		  default: '#FFDA05'
		},
		openType: String,
		disabled: Boolean,
		loading: Boolean
	},
	computed: {
		...mapState({
			userInfo: state => state.user.userInfo,
			loginCode: state => state.user.loginCode
		}),
		// #ifdef MP-WEIXIN || MP-ALIPAY
		needAuthPhone () {
			return this.userInfo.token && !this.userInfo.tel
		}
		// #endif
	},
	data () {
		return {
			loadingPhone: false
		}
	},
	methods: {
		resetOptions () {
			if (!this.loading) {
			  this.$emit('reset')
			}
		},
		evaluate () {
			this.$emit('evaluate')
		},
		launchPhoneNumber () {
			if (this.loadingPhone) return
			this.loadingPhone = true
		},
		async getPhoneNumber (e) {
			const { errMsg, encryptedData = '', iv = '' } = e.detail
			if (errMsg !== 'getPhoneNumber:ok') {
				this.loadingPhone = false
				return
			}
			const params = {
				encryptedData
			}
			// #ifdef MP-WEIXIN
			params.code = this.loginCode
			params.encryptedData = encodeURIComponent(encryptedData)
			params.iv = encodeURIComponent(iv)
			const [res] = await this.$apis.wechatBindPhone(params)
			// #endif
			// #ifdef MP-ALIPAY
			params.encryptedData = encryptedData
			const [res] = await this.$apis.alipayBindPhone(params)
			// #endif
			this.loadingPhone = false
			if (res._errCode === '0') {
				this.$store.dispatch('user/getUserInfo')
				this.evaluate()
			} else {
				// #ifdef MP-WEIXIN
				this.$store.dispatch('user/getLoginCode')
				// #endif
				uni.showToast({
					title: res._errStr || '绑定手机号失败',
					icon: 'none'
				})
			}
		}
	},
	// #ifdef MP-WEIXIN
	mounted () {
		if (this.needAuthPhone) {
			this.$store.dispatch('user/getLoginCode')
		}
	}
	// #endif
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>